<template>
	<view class="bg">

		<!-- <uni-nav-bar style="font-weight: bold;" title="绑定会员卡" :fixed="true" :statusBar="true" :border="false"
			leftWidth="200rpx" rightWidth="200rpx">

			<template v-slot:left>
				<view style="height: 60rpx;width: 60rpx;" @tap="nav_back">
					<image style="width: 100%;height: 100%;"
						src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
				</view>
			</template>
		</uni-nav-bar> -->
		<view class="container flex-column">
			<view class="navBack">
				<template v-slot:left>
					<view style="height: 60rpx;width: 60rpx;" @tap="nav_back">
						<image style="width: 100%;height: 100%;"
							src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
					</view>
				</template>
			</view>

			<view class="top">
				<view class="left flex-row">
					<view class="head">
						<image class="headImage"
							:src="!!userInfo.head  ? myheadImage : 'https://mcdn.chatgk.com/xcx/static/images/wode/headimageMan.png'">
						</image>
						<image class="vip" src="https://mcdn.chatgk.com/xcx/static/images/wode/icon_wode_vip.png" mode="">
						</image>
					</view>
					<view class="info flex-column">
						<view class="phone">
							{{userInfo.nick}}
						</view>
						<view class="isVIP">
							vip状态: <text class="bold">{{isVipType}}</text>
						</view>
						<view class="time">
							会员到期日: <text>{{userInfo.expiretime}}</text>
						</view>
					</view>
				</view>

				<view class="right">
					<image class="vip" src="https://mcdn.chatgk.com/xcx/static/images/login/huiyuan.png" mode=""></image>
				</view>
			</view>

			<view class="down">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="info flex-row">
						<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/phone.png"
							mode="aspectFit">
						</image>
						<input v-model="cardID" @input="onInputChange" class="input" type="number"
							placeholder-style="color:#999999; font-size: 28rpx; font-weight: normal"
							placeholder="请输入您的会员卡号">
					</view>
				</view>
				<view class="item">
					<view class="title">
						手机
					</view>
					<view class="info flex-row">
						<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
							mode="aspectFit"></image>
						<input class="input" v-model="password" @input="onInputChange" password="true"
							placeholder-style="color:#999999; font-size: 28rpx; font-weight: normal"
							placeholder="请输入会员卡密码" />
					</view>
				</view>
			</view>

			<button class="button-login" :class="isAvailable ? 'available':''" @tap="onClickSubmit">确定</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow: false,
				cardID: "",
				password: "",
				isAvailable: false, // 确定按钮是否可用
				userInfo: getApp().globalData.userInfo,
				myheadImage: '',
				isVipType: ''
			}
		},
		onLoad() {
			// this.userInfo = getApp().globalData.userInfo
			console.log('this.userInfo', this.userInfo)
			if (!!this.userInfo.head) {
				this.myheadImage = 'http://mcdn.chatgk.com' + this.userInfo.head
			}
			console.log('this.userInfo', this.userInfo)
			if (!!this.userInfo.isVIP) {
				if (this.userInfo.isVIP == 1) {
					this.isVipType = 'VIP'
				} else if (this.userInfo.isVIP == 2) {
					this.isVipType = '升学卡VIP'
				} else if (this.userInfo.isVIP == 3) {
					this.isVipType = '体验卡VIP'
				}
			} else {
				this.isVipType = '非VIP'
			}
		},
		methods: {
			nav_back() {
				uni.navigateBack()
			},
			// 输入框值改变
			onInputChange() {
				this.checkIsAvailable()
			},
			// 点击确定
			onClickSubmit() {

				if (!this.isAvailable) {
					return
				}

				let data = {}
				data["member_id"] = this.cardID
				data["password"] = this.password
				this.loadshow = true
				this.$request.memberBind(data).then(res => {
					this.loadshow = false
					uni.showToast({
						title: "绑定成功",
						icon: "success"
					})

					const userInfo = getApp().globalData.userInfo

					setTimeout(() => {
						if (userInfo.setpwd == "1") {
							uni.navigateTo({
								url: './set-password'
							})
						} else if (!userInfo.pid) {
							uni.navigateTo({
								url: './perfect-info'
							})
						} else {
							uni.navigateBack({
								delta: 3
							})
						}
					}, 1000)
				})
			},
			// 检查确定按钮是否可用
			checkIsAvailable() {
				this.isAvailable = this.cardID.length > 0 && this.password.length > 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/login/bg.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.center-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.container {
		padding: 0 32rpx;

		.navBack {
			margin-top: 100rpx;
		}

		.top {
			margin: 68rpx 0 32rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				margin: 0 20rpx;

				.head {
					position: relative;

					.headImage {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 4rpx solid #FFFFFF;
					}

					.vip {
						width: 48rpx;
						height: 40rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.info {
					margin: auto;
					margin-left: 20rpx;

					.phone {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.isVIP {
						font-weight: normal;
						font-size: 24rpx;
						color: #FF3B0A;
						margin-bottom: 8rpx;

						.bold {
							font-size: 28rpx;
						}
					}

					.time {
						font-weight: normal;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.right {
				.vip {
					width: 210rpx;
					height: 192rpx;
				}
			}
		}

		.down {
			margin-left: 40rpx;

			.item {
				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #464646;
					margin-bottom: 24rpx;
				}

				.info {
					width: 600rpx;
					height: 104rpx;
					border-radius: 16rpx;
					border: 1rpx solid #333333;
					margin-bottom: 40rpx;
					align-items: center;

					.input-lefticon {
						height: 40rpx;
						width: 40rpx;
						margin-left: 24rpx;
					}

					.input {
						margin-left: 38rpx;
					}
				}
			}
		}

		.button-login {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			background-color: #D8D8D8;
			margin-top: 150rpx;
			border-radius: 38rpx;
		}

		.button-login.available {
			background: #FF3B0A;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(255, 59, 10, 0.3);
		}
	}
</style>